<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>ArrcenIMChat</title>

		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.0.11/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="css/styles.css">
		<script>
			console.clear();
			console.log("样式文件加载完成");
		</script>

		<!-- 引入socketio -->
		<script src="https://unpkg.com/socket.io-client@2.0.4/dist/socket.io.js"></script>
		<!--<script src="https://unpkg.com/socket.io-client@2.0.4/dist/socket.io.js.map"></script>-->
		<!--<script src="lib/socket.io.js"></script>-->
		<script>
			console.log("socketio库文件加载完成");
		</script>

		<!-- 先引入 Vue -->
		 <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
		<!--<script src="lib/vue.js"></script>-->
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui@2.0.11/lib/index.js"></script>

		<script>
			console.log("vue和element库加载完成");
		</script>
	</head>

	<body>
		<div id="app">

			<el-row class="row-bg">
				<el-col :span="24">
					<div class="grid-content bg-purple">
						socketio测试地址:
						<el-input type="text" v-model="socketUrl">
							<template slot="prepend">Http://</template>
						</el-input>
						<div class="flex-container">
							<el-button :loading="connecting" @click="socketConnectHandle();" type="primary">{{ connectState }}</el-button>
						</div>
					</div>
				</el-col>
			</el-row>

			<el-row class="row-bg" :gutter="20" type="flex" justify="center">
				<el-col :span="12">
					<div class="grid-content bg-purple-light">
						用户id:
						<el-input type="text" v-model="register.userId"></el-input>
						应用id:
						<!-- <el-input type="text" v-model="register.projectId" ></el-input> -->
						<el-autocomplete class="block" v-model="register.projectId" :fetch-suggestions="querySearchProjectId" placeholder="请输入项目Id" @select="handleSelect"></el-autocomplete>
						设备类型:
						<el-input type="text" v-model="register.devtype"></el-input>
						设备Token:
						<el-input type="text" v-model="register.devtoken"></el-input>

						<div class="flex-container">
							<el-button @click="regist(register);" type="primary">注册</el-button>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light">
						目标id:
						<el-input type="text" v-model="message.targetId"></el-input>
						应用id:
						<el-autocomplete class="block" v-model="message.projectId" :fetch-suggestions="querySearchProjectId" placeholder="请输入项目Id" @select="handleSelect"></el-autocomplete>
						<!-- <el-input type="text" v-model="message.projectId"></el-input> -->
						消息:
						<el-input type="textarea" v-model="message.content"></el-input>

						<div class="flex-container">
							<el-button @click="sendMessage(message);" type="info">发送消息</el-button>
							<el-button @click="sendNotification(message);" type="info">发送通知</el-button>
							<el-button @click="sendFriendApply(message);" type="info">发送好友请求</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<script src="js/index.js"></script>
	</body>
</html>